
<template>
  <div class="main__wrapper">
    <div class="side-bar" :class="{'side-bar-collapse': menuIsCollapse}">
      <div class="logo">
        <span class="iconfont" :class="currentViewIcon"></span>
        <span v-if="!menuIsCollapse" class="text">{{ currentViewName }}</span>
      </div>
      <the-menu ref="menu"></the-menu>
    </div>
    <div class="main">
      <div class="main__header">
        <div class="left">
          <span @click="handleMenuCollapse" class="iconfont icon-menu-toggle"></span>
        </div>
        <div class="right">
          <span class="iconfont icon-password" title="修改密码" @click="isShowModifyPassword = true"></span>
          <span class="iconfont icon-logout" title="退出登录" @click="logout"></span>
          <span class="username">{{ username }}</span>
        </div>
      </div>
      <div class="main__breadcrumb">
        <the-breadcrumb></the-breadcrumb>
      </div>
      <div class="main__content">
        <router-view></router-view>
      </div>
    </div>

    <el-dialog
      :visible.sync="isShowModifyPassword"
      width="600px"
      title="修改密码">
      <modify-password
        v-if="isShowModifyPassword"
        @success="isShowModifyPassword = false"
        @close="isShowModifyPassword = false"></modify-password>
    </el-dialog>
  </div>
</template>

<script>
import TheMenu from '@/components/TheMenu.vue'
import TheBreadcrumb from '@/components/TheBreadcrumb.vue'

import { default_routes } from '@/router/routes'
import VueRouter from 'vue-router'

import ModifyPassword from '@/views/admin/ModifyPassword'
import { getUserInfoApi, logoutApi } from '@/api/modules/admin'

export default {
  name: 'Main',
  components: { TheMenu, TheBreadcrumb, ModifyPassword },
  data () {
    return {
      menuIsCollapse: false,
      username: '',
      isShowModifyPassword: false,

      currentViewName: '宠物便捷服务管理端',
      currentViewIcon: 'icon-inspection'
    }
  },
  methods: {
    handleMenuCollapse () {
      this.$refs['menu'].toggleCollapse()
      this.menuIsCollapse = this.$refs['menu'].isCollapse
    },
    // 获取当前用户的相关信息
    async getUserInfo () {
      try {
        const { data } = await getUserInfoApi()
        const { name } = data
        
        sessionStorage.setItem('USER_NAME', name)

        this.username = name

      } catch (err) {
        console.error(err)
      }
    },

    async logout () {
      logoutApi()

      sessionStorage.clear()

      // 路由重置
      const createRouter = () =>
        new VueRouter({
          mode: 'history',
          base: process.env.BASE_URL,
          routes: default_routes
        })
      this.$router.matcher = createRouter().matcher
      
      this.$router.push({ name: 'Login' })
    }
  },
  mounted () {
    
    this.menuIsCollapse = this.$refs['menu'].isCollapse
    
    // this.getUserInfo()

  }
}


</script>


<style lang="less">
  .main__wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;

    display: flex;
    .main__header {
      align-items: center;
      .iconfont {
        cursor: pointer;
      }
      .right {
        .iconfont {
          display: inline-block;
          margin-right: 24px;
        }
        .username {
          font-size: 14px;
        }
      }
    }

    .side-bar {
      box-sizing: border-box;
      flex-basis: 220px;
      background-color: #001E26;
      overflow-y: auto;
      overflow-x: hidden;
      transition: .3s;
      .logo {
        color: #FFF;
        font-size: 18px;
        background-color: rgba(255, 255, 255, .2);

        width: 100%;
        height: 60px;

        display: flex;
        justify-content: center;
        align-items: center;

        .iconfont {
          font-size: 24px;
          margin-right: 4px;
          position: relative;
          top: 1px;
        }
        .text{
          white-space: nowrap;
        }
      }

      
    }
    .side-bar-collapse {
      flex-basis: 60px;
    }
    .side-bar::-webkit-scrollbar {
      width: 0;
    }
    .side-bar:hover::-webkit-scrollbar {
      width: 3px;
    }

    .main {
      @header-height: 40px;
      @breadcrumb-height: 50px;
      width: 100%;
      height: 100%;
      overflow: hidden;
      .main__header {
        width: 100%;
        height: @header-height;
        box-sizing: border-box;
        border-bottom: 1px solid rgb(230, 230, 230);
        background-color: #FFF;

        padding: 0 12px;

        display: flex;
        justify-content: space-between;
        align-items: center;

        .icon-menu-toggle {
          font-size: 24px;
          cursor: pointer;
        }
      }
      .main__breadcrumb {
        width: 100%;
        height: @breadcrumb-height;
        background-color: #FFF;
        box-sizing: border-box;
        border-bottom: 1px solid rgb(245, 245, 245);
      }
      .main__content {
        width: 100%;
        height: calc(100% - @header-height - @breadcrumb-height);
        max-height: calc(100% - @header-height - @breadcrumb-height);
        overflow: auto;
        background-color: rgb(235, 235, 235);
        // background-color: rgb(37, 35, 35);
      }
    }

  }

</style>